<template>
  <div class="videoBox">
    <input
      class="input"
      ref="uploader"
      @change="onFileChange"
      type="file"
      :accept="accept"
      :multiple="multiple"
    />
    <label ref="uploaderlabel" style="cursor: pointer">
      <slot>
        <div class="icon-upload" style="width: 100%; height: 100%">
          <div class="uploadCenter">
            <i class="el-icon-upload"></i>
            <div>{{ hintTitle }}</div>
          </div>
        </div>
      </slot>
    </label>
  </div>
</template>
<script>
export default {
  props: {
    accept: {
      type: String,
      default: "video/*", // 指定的文件格式
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    hintTitle: {
      type: String,
      default: "上传视频",
    },
  },
  methods: {
    onFileChange(e) {
      console.log(e.target.files, "ppppp");
      var files = e.target.files;
      var urls = [];
      for (let i = 0; i < files.length; i++) {
        urls.push(URL.createObjectURL(files[i]));
      }
      this.$emit("on-select", {
        files: e.target.files, // 传给后端的文件
        localUrls: urls, //  // 本地图片展示
      });
      setTimeout(() => {
        this.$refs.uploader.value = "";
      }, 10);
    },
  },
};
</script>
<style>
.videoBox {
  position: relative;
  width: 100px;
  height: 100px;
}
.input {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0;
}
.icon-upload {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.uploadCenter {
  text-align: center;
}
.el-icon-upload {
  display: block;
}
</style>

